<template>
  <div class="page-container">
    <el-dialog title="提示" v-model="dialogVisible" width="30%">
      <span>确认要删除该条数据吗?</span>
      <template #footer>
                <span class="dialog-footer">
                  <el-button @click="dialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="handleDelete">确 定</el-button>
                </span>
      </template>
    </el-dialog>


    <div class="container">
      <!-- 左侧树状结构，使用封装的组件 -->
      <catalog ref="categoryTreeRef" add-text="新增分类"
               :fetch="false"
               :current-node-key="searchObject.selectKey"
               :default-expanded-keys="searchObject.treeKeys"
               v-model="selectedParentNode"
               @node-click="handleCategoryNodeClick"
               title="功能分类"
               show-node-actions

      />

      <!-- 右侧内容区 -->
      <div class="content-container">
        <div class="search">
          <el-form label-width="80px" :model="searchObject" ref="searchForm">
            <el-row>
              <el-col :span="6" style="padding: 0 8px;">
                <el-form-item label="查询方法" prop="id">
                  <el-input v-model="searchObject.id"  placeholder="查询方法" name="id"  @keyup.enter="search">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6" style="padding: 0 8px;">
                <el-form-item label="模板名称" prop="name">
                  <el-input v-model="searchObject.name"  placeholder="模板名称" name="name" @keyup.enter="search">
                  </el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12" style="padding: 0 10px;">
                <el-row type="flex" justify="end">
                  <el-button type="primary" @click="search">搜索</el-button>
                  <el-button plain @click="clearSearch">清除条件</el-button>
                </el-row>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="data-content">
          <div class="tool-add">
            <el-button type="primary" @click="goAddView">新增</el-button>
          </div>

          <el-table v-loading="loading" :data="pageData.data" @sort-change="changeTableSort"
                    style="width: 100%;font-size: 12px;">
            <el-table-column label="序号"  type="index" width="50">
            </el-table-column>
            <el-table-column label="模板代码" prop="id"  width="360" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="模板名称" prop="name"   width="300" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="添加时间" prop="addDate"  width="160"    sortable="custom" >
            </el-table-column>
            <el-table-column width="210" align="center" fixed="right" label="操作">
              <template #default="scope">
                <el-button text class="operation_bt" :icon="InfoFilled" type="info" @click="showView(scope.row)">详情
                </el-button>

                <el-button text class="operation_bt" :icon="Edit" type="primary" @click="editView(scope.row)">编辑
                </el-button>

                <el-button text :icon="Delete" class="operation_bt" type="danger" style="cursor: pointer;"
                          @click="deleteData(scope.row)">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <div class="page">
            <el-pagination background :current-page="searchObject.no" :page-sizes="[10, 20, 30,50, 100]"
                          :page-size="pageData.size" :pager-count="5"
                          layout="total, sizes, prev, pager, next, jumper" :page-count="pageData.totalPage"
                          :total="pageData.total" @size-change="sizeChange" @current-change="pageChange">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {Delete, Edit, InfoFilled} from '@element-plus/icons-vue'
import {defineStore} from 'pinia'
import {useDelete} from "@/utils/useDelete";
import {useView} from "@/utils/useView";
import {onMounted, ref} from "vue";
import {usePageData} from "@/uses/usePageData.js";
import {useRouter} from "vue-router";
import Catalog from "@/components/catalog.vue";

const router = useRouter();
//19
const keys = ref(["31"])
const searchForm = ref()
const searchStore = defineStore('queryTemplateStore', {
  state: () => {
    return {
      searchObject: {
        no: 1,
        size: 30,
        sortField: "addDate",
        sortMethod: "desc",
        name: null,
        id:null,
        queryCatalog: null,
        type: null,
        treeKeys:  null,
        selectKey:  null,
        categoryId: null // 新增分类ID筛选
      }
    }
  }
})

const {searchObject} = searchStore();

const clearSearch = () => {
  searchObject.id=null;
  searchObject.name=null;
  searchObject.catalog=null;
}

const {
  pageData,
  sizeChange,
  pageChange,
  search,
  changeTableSort,
  loading
} = usePageData("query_template_list", searchObject);



const {dialogVisible, deleteData, handleDelete} = useDelete("/queryTemplate/delete", search);
const {showView, addView, editView} = useView();

// 引用分类树组件和相关数据
const categoryTreeRef = ref(null);
const selectedParentNode = ref(null);


onMounted(()=>{
  if (searchObject.catalog) {
    selectedParentNode.value=searchObject.catalog;
  }
})

const goAddView=async () => {
  let param={}
  if (searchObject.catalog){
    param.catalog=searchObject.catalog;
  }
  console.log(param)
  await router.push({
    path: 'add',
    query:  param
  });
}

// 处理分类树节点点击
const handleCategoryNodeClick = (data) => {
  // 记录选中的节点用于筛选
  selectedParentNode.value = data;

  searchObject.treeKeys=[data.id];
  searchObject.selectKey=data.id;
  // 更新搜索条件，根据选中的分类节点筛选数据
  searchObject.catalog = data.id; // 当点击"全部"节点时，catalog将为null
  searchObject.no = 1;
  search();
};


</script>

<style scoped lang="scss">
.page-container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.container {
  display: flex;
  height: 100%;
  overflow: hidden; /* 防止容器出现滚动条 */
  flex: 1; /* 占满剩余空间 */
}

.content-container {
  flex: 1;
  padding: 10px;
  overflow: hidden; /* 防止容器出现滚动条 */
  min-width: 0; /* 确保内容区域可以缩小 */
  background-color: #fff; /* 内容区域背景色 */
  display: flex;
  flex-direction: column;
  height: 100%;
}

.search {
  margin-bottom: 10px;
}

.data-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 防止容器出现滚动条 */
  border: none;
}

.tool-add {
  margin-bottom: 10px;
}

.page {
  margin-top: 15px;
  display: flex;
  justify-content: center;
  padding-bottom: 15px;
}

/* 排序相关样式 */
.sort-tip {
  margin-bottom: 10px;
  color: #909399;
  font-size: 14px;
}

.no-data {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  color: #909399;
}

/* 使用深度选择器修改Element Plus表格的样式 */
:deep(.el-table) {
  --el-table-border-color: #dcdfe6;
  flex: 1; /* 表格占满剩余空间 */
  overflow: auto; /* 内容过多时滚动 */
}

:deep(.sortable-row) {
  cursor: move !important;
  transition: background-color 0.2s ease;
}

:deep(.sortable-row:hover) {
  background-color: #f5f7fa !important;
}

:deep(.el-table__body) {
  width: 100% !important;
}

:deep(.sortable-ghost) {
  background-color: #e6f1fc !important;
  opacity: 0.8 !important;
}

:deep(.el-dialog__body) {
  padding-top: 10px;
  padding-bottom: 10px;
}

/* 确保树结构相关元素不会产生滚动条 */
:deep(.el-tree-node__content) {
  height: auto;
  min-height: 30px;
  padding: 4px 0;
  overflow: hidden;
  transition: background-color 0.3s ease;
}

:deep(.el-tree-node__content:hover) {
  background-color: #f5f7fa;
}

/* 拖拽节点时的样式 */
:deep(.is-dragging) {
  background-color: #e6f1fc !important;
  color: #409eff;
  font-weight: bold;
  opacity: 0.8;
}

:deep(.is-dragging .node-label) {
  color: #409eff;
}

:deep(.is-drop-inner) {
  background-color: #f0f9eb !important;
  color: #67c23a;
  border: 1px dashed #67c23a !important;
}

:deep(.is-drop-inner>.el-tree-node__content) {
  background-color: #f0f9eb !important;
}

:deep(.el-tree__drop-indicator) {
  background-color: #409eff !important;
  height: 2px !important;
}

:deep(.el-tree-node.is-drop-inner>.el-tree-node__content .node-label) {
  color: #67c23a;
}

:deep(.el-tree) {
  width: auto !important;
  max-width: 100%;
}

:deep(.el-tree-node__children) {
  overflow: hidden;
}

:deep(.el-tree-node) {
  width: 100%;
  overflow: hidden !important;
}

/* 按钮样式优化 */
:deep(.el-button--small) {
  padding: 2px;
  margin-left: 0;
  min-width: 22px;
}

:deep(.el-tooltip__trigger) {
  margin: 0 1px;
}

:deep(.el-button.is-text) {
  padding: 2px 3px;
}

/* 响应式设计 */
@media (max-width: 320px) {
  .tree-tools {
    flex-direction: column;
    gap: 5px;
  }
}

@media (max-width: 300px) {
  .node-actions {
    position: absolute;
    right: 5px;
    background: white;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    padding: 2px;
    z-index: 10;
  }

  .node-label {
    max-width: 150px;
  }
}
</style>
